<template>
  <!-- 折线图 -->
  <div style="height:300px;overflow: hidden;">
    <Row
      v-if="option.series.length==0"
      style="height:300px;background: white;"
      type="flex"
      align="middle"
      justify="center"
    >
      <img src="~@/assets/img/efficiencyAnalysis/zwsj.png" height="50%" />
    </Row>
    <div ref="main" id="begin" style="height:300px;overflow: hidden;"></div>
  </div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  props: {
    viewData: {
      type: Object,
      default: null
    },
    width: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      option: {
        noDataLoadingOption: {
          text: "暂无数据",
          effect: "bubble",
          effectOption: {
            effect: {
              n: 0
            }
          }
        },
        color: Style.color,
        dataZoom: [
          {
            type: "inside"
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          //类别样式
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          data: this.viewData != null ? this.viewData.lData : []
        },
        grid: {
          ...Style.grid
        },
        xAxis: {
          show: true,
          name: this.viewData != null ? this.viewData.xName : "",
          type: "category",
          data: this.viewData != null ? this.viewData.xData : [],
          nameTextStyle: {
            padding: [27, 0, 0, 0],
            color: "#666" //x轴单位的颜色
          },
          axisLine: {
            show: true, //x轴,测试要求加上
            lineStyle: {
              type: "solid",
              color: "#e8e8e8" //x轴线的颜色
            }
          },
          axisLabel: {
            color: "#666" //x轴文字的颜色
          },
          axisTick: {
            show: false //测试要求不显示刻度线
          }
        },
        yAxis: {
          type: "value",
          name: this.viewData != null ? this.viewData.yName : "",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#e8e8e8"
            }
          },
          nameTextStyle: {
            padding: [0, 0, 0, -33],
            color: "#666" //x轴单位的颜色
          },
          axisLine: {
            show: false, //x轴,测试要求加上
            lineStyle: {
              type: "solid",
              color: "#666" //x轴线的颜色
            }
          },
          axisLabel: {
            color: "#666" //x轴文字的颜色
          },
          axisTick: {
            show: false //测试要求不显示刻度线
          }
        },
        series: this.viewData != null ? this.viewData.sData : [],
        animationEasing: "elasticOut",
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      }
    };
  },
  computed: {},
  watch: {
    viewData(value) {
      if ("yName" in value) {
        this.option.yAxis.name = value.yName;
      } else {
        this.viewData.yName = "";
      }
      if ("xName" in value) {
        this.option.xAxis.name = value.xName;
      } else {
        this.viewData.xName = "";
      }
      if ("color" in value) {
        this.option.color = value.color;
      }
      this.option.legend.data = value.lData;
      this.option.xAxis.data = value.xData;
      this.option.series = value.sData;
      let myChart = this.$echarts.init(this.$refs.main);
      myChart.setOption(this.option, true);
      // myChart.on("click", data => {
      //   console.log(data);
      // });
    }
  },
  methods: {},
  created() {},
  mounted() {
    if (this.width != 0) {
      document.getElementById("begin").style.width = this.width + "px";
    } else {
      let width = document.getElementById("begin").scrollWidth;
      document.getElementById("begin").style.width = width + "px";
    }
    let myChart = this.$echarts.init(this.$refs.main);
    myChart.setOption(this.option);
    // document.getElementById("begin").firstChild.firstChild.style.width = width + "px";
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>